<template>
  <div class="searchSuggestion">
    <van-cell
     :title="text" 
     v-for="(text,index) in suggestions"
     :key="index"
     @click="$emit('search',text)"
     icon="search"></van-cell>
  </div>
</template>

<script>
import { getSearchSuggestionsAPI } from '@/api'

// 按需加载：只会把用到的成员打包到结果中
import { debounce } from 'lodash'
export default {
data(){
    return{
        suggestions:[] //联想数据列表
    }
},
props:{
    searchText:{
        type:String,
        required:true
    }
},
watch:{
    searchText:{
        // 当searchText发生改变时调用handler函数
        // handler函数名称时固定的

        // debounce函数：参数1：一个函数；参数2：延迟时间，单位是毫秒
        // 返回值：防抖之后的函数
        handler:debounce(function(value){
         this.loadSearchSuggestions(value)
        },800),
         immediate: true // 该回调将会在侦听开始之后立即调用
    }
},
methods:{
    async loadSearchSuggestions (q) {
        try {
            const {data} = await getSearchSuggestionsAPI(q)
            this.suggestions = data.data.options
        } catch (err) {
            this.$toast('获取数据失败，请稍后重试')
        }
    }
}
}
</script>

<style>

</style>